<template>
  <div class="mall-select-wrapper flex">
    <template v-if="activeMallMode === 'SELECT'">
      <el-select
        v-model="ruleForm.mallNameId"
        placeholder="所在商圈/商场"
        clearable
        class="input-height w-full"
        style="width: 100%"
        :disabled="disabled"
        @change="changeMallSelect"
      >
        <el-option
          v-for="item in mallList"
          :key="item.id"
          :label="item.mallName"
          :value="item.id"
        />
      </el-select>
    </template>
    <template v-else>
      <el-input
        v-model="ruleForm.mallName"
        :disabled="disabled"
        placeholder="所在商圈/商场"
        class="input-height"
        @input="handleInput"
      />
    </template>
  </div>
  <!-- <el-button
    style="margin-left: 3%"
    type="primary"
    link
    @click="changeMallMode"
    :disabled="disabled"
  >
    {{ mallChangeTitle }}
  </el-button> -->
</template>
<script setup>
import { getMallList } from "@/api/myIndex/index";
const emit = defineEmits(["onChangeMall"]);
const mallList = ref([]);
const props = defineProps({
  defaultMall: {
    type: Object,
    default: () => {},
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const ruleForm = reactive({
  mallNameId: "",
  mallName: "",
});
watch(
  () => props.defaultMall,
  (val) => {
    if (val) {
      console.log(val);

      ruleForm.mallNameId = val.mallNameId;
      ruleForm.mallName = val.mallName;
      emit("onChangeMall", ruleForm);
    }
  },
  {
    immediate: true,
  }
);

/**
 *  所在商圈/商场 处理
 *
 */
// SELECT 和 INPUT 模式
const activeMallMode = ref("SELECT");
const mallChangeTitle = ref("手动填写");
const changeMallMode = () => {
  // 清空商圈选中的值
  ruleForm.mallNameId = "";
  ruleForm.mallName = "";
  activeMallMode.value = activeMallMode.value === "SELECT" ? "INPUT" : "SELECT";
  mallChangeTitle.value = activeMallMode.value === "SELECT" ? "手动填写" : "选择商圈";
  emit("onChangeMall", ruleForm);
};
async function funcGetMallList() {
  try {
    const data = await getMallList();
    mallList.value = data.data;
  } catch (err) {
    console.log(err);
  }
}
const changeMallSelect = (val) => {
  console.log(val, "val");
  ruleForm.mallName = mallList.value.find((item) => item.id == val)?.mallName;
  ruleForm.mallNameId = val;
  emit("onChangeMall", ruleForm);
};

const handleInput = (val) => {
  ruleForm.mallName = val;
  ruleForm.mallNameId = "";
  emit("onChangeMall", ruleForm);
};
onMounted(() => {
  funcGetMallList();
});
</script>

<style scoped>
.mall-select-wrapper {
  width: 100%;
}
</style>
